<template>
  <div class="category-view min-h-screen bg-background-cream">
    <div class="max-w-6xl mx-auto px-6 py-8">
      <!-- 页面标题 -->
      <div class="text-center mb-12">
        <h1 class="text-4xl md:text-5xl font-bold text-text-primary mb-4">
          分类浏览
        </h1>
        <p class="text-xl text-text-secondary">
          按照主题、作者、朝代或难度来探索古诗
        </p>
      </div>
      
      <!-- 筛选器 -->
      <div class="bg-white rounded-card p-8 shadow-card mb-8">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          <!-- 主题筛选 -->
          <div>
            <h3 class="text-lg font-bold text-text-primary mb-4">主题分类</h3>
            <div class="space-y-2">
              <button
                v-for="theme in themes"
                :key="theme.key"
                @click="selectedTheme = theme.key"
                class="w-full p-3 text-left rounded-input transition-all"
                :class="selectedTheme === theme.key 
                  ? 'bg-primary-coral text-white' 
                  : 'bg-gray-50 text-text-secondary hover:bg-gray-100'"
              >
                <div class="flex items-center space-x-3">
                  <img :src="theme.icon" :alt="theme.name" class="w-6 h-6 rounded-circle" />
                  <span class="font-medium">{{ theme.name }}</span>
                  <span class="text-xs opacity-75">({{ theme.count }})</span>
                </div>
              </button>
            </div>
          </div>
          
          <!-- 朝代筛选 -->
          <div>
            <h3 class="text-lg font-bold text-text-primary mb-4">朝代</h3>
            <div class="space-y-2">
              <button
                v-for="dynasty in dynasties"
                :key="dynasty"
                @click="selectedDynasty = dynasty === selectedDynasty ? '' : dynasty"
                class="w-full p-3 text-left rounded-input transition-all"
                :class="selectedDynasty === dynasty 
                  ? 'bg-secondary-turquoise text-white' 
                  : 'bg-gray-50 text-text-secondary hover:bg-gray-100'"
              >
                <div class="flex items-center justify-between">
                  <span class="font-medium">{{ dynasty }}代</span>
                  <span class="text-xs opacity-75">({{ getPoemCountByDynasty(dynasty) }})</span>
                </div>
              </button>
            </div>
          </div>
          
          <!-- 难度筛选 -->
          <div>
            <h3 class="text-lg font-bold text-text-primary mb-4">难度等级</h3>
            <div class="space-y-2">
              <button
                v-for="difficulty in difficulties"
                :key="difficulty.key"
                @click="selectedDifficulty = difficulty.key === selectedDifficulty ? '' : difficulty.key"
                class="w-full p-3 text-left rounded-input transition-all"
                :class="selectedDifficulty === difficulty.key 
                  ? 'bg-accent-green text-white' 
                  : 'bg-gray-50 text-text-secondary hover:bg-gray-100'"
              >
                <div class="flex items-center justify-between">
                  <span class="font-medium">{{ difficulty.name }}</span>
                  <span class="text-xs opacity-75">({{ getPoemCountByDifficulty(difficulty.key) }})</span>
                </div>
              </button>
            </div>
          </div>
          
          <!-- 作者筛选 -->
          <div>
            <h3 class="text-lg font-bold text-text-primary mb-4">著名诗人</h3>
            <div class="space-y-2 max-h-48 overflow-y-auto">
              <button
                v-for="author in authors"
                :key="author"
                @click="selectedAuthor = author === selectedAuthor ? '' : author"
                class="w-full p-3 text-left rounded-input transition-all"
                :class="selectedAuthor === author 
                  ? 'bg-accent-yellow text-text-primary' 
                  : 'bg-gray-50 text-text-secondary hover:bg-gray-100'"
              >
                <div class="flex items-center justify-between">
                  <span class="font-medium text-sm">{{ author }}</span>
                  <span class="text-xs opacity-75">({{ getPoemCountByAuthor(author) }})</span>
                </div>
              </button>
            </div>
          </div>
        </div>
        
        <!-- 清除筛选 -->
        <div class="mt-6 flex justify-center">
          <button 
            @click="clearFilters"
            class="px-6 py-3 bg-gray-200 text-text-secondary rounded-pill hover:bg-gray-300 transition-colors font-medium"
          >
            清除所有筛选
          </button>
        </div>
      </div>
      
      <!-- 搜索框 -->
      <div class="mb-8">
        <div class="relative max-w-md mx-auto">
          <input
            v-model="searchQuery"
            type="text"
            placeholder="搜索古诗标题、作者或内容..."
            class="w-full py-4 px-6 pr-12 rounded-input bg-white border-2 border-gray-200 text-lg focus:border-primary-coral focus:outline-none transition-colors"
          />
          <div class="absolute right-4 top-1/2 transform -translate-y-1/2">
            <img src="/images/icon_book_3.jpg" alt="搜索" class="w-6 h-6" />
          </div>
        </div>
      </div>
      
      <!-- 筛选结果统计 -->
      <div class="mb-6 flex items-center justify-between">
        <div class="text-lg text-text-secondary">
          共找到 <span class="font-bold text-primary-coral">{{ filteredPoems.length }}</span> 首古诗
        </div>
        
        <div class="flex items-center space-x-4 text-sm text-text-secondary">
          <span v-if="selectedTheme">主题: {{ getThemeName(selectedTheme) }}</span>
          <span v-if="selectedDynasty">朝代: {{ selectedDynasty }}代</span>
          <span v-if="selectedDifficulty">难度: {{ getDifficultyName(selectedDifficulty) }}</span>
          <span v-if="selectedAuthor">作者: {{ selectedAuthor }}</span>
        </div>
      </div>
      
      <!-- 古诗网格 -->
      <PoetryGrid 
        :search-query="searchQuery"
        :selected-theme="selectedTheme"
        :selected-dynasty="selectedDynasty"
        :selected-difficulty="selectedDifficulty"
        :selected-author="selectedAuthor"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { usePoetryStore } from '@/stores/poetry'
import PoetryGrid from '@/components/PoetryGrid.vue'

const poetryStore = usePoetryStore()

// 响应式数据
const searchQuery = ref('')
const selectedTheme = ref('')
const selectedDynasty = ref('')
const selectedDifficulty = ref('')
const selectedAuthor = ref('')

// 主题分类
const themes = ref([
  {
    key: 'spring',
    name: '春天',
    icon: '/images/theme_spring_2.jpg',
    count: 0
  },
  {
    key: 'summer',
    name: '夏天',
    icon: '/images/theme_summer_5.png',
    count: 0
  },
  {
    key: 'autumn',
    name: '秋天',
    icon: '/images/theme_autumn_4.jpg',
    count: 0
  },
  {
    key: 'winter',
    name: '冬天',
    icon: '/images/theme_winter_0.jpg',
    count: 0
  },
  {
    key: 'animal',
    name: '动物',
    icon: '/images/theme_animal_0.jpg',
    count: 0
  },
  {
    key: 'landscape',
    name: '山水',
    icon: '/images/theme_landscape_0.jpg',
    count: 0
  },
  {
    key: 'family',
    name: '亲情',
    icon: '/images/theme_family_5.jpg',
    count: 0
  }
])

// 难度等级
const difficulties = ref([
  { key: 'beginner', name: '启蒙 (≤20字)' },
  { key: 'intermediate', name: '进阶 (20-28字)' },
  { key: 'advanced', name: '熟练 (>28字)' }
])

// 计算属性
const authors = computed(() => poetryStore.getAllAuthors)
const dynasties = computed(() => poetryStore.getAllDynasties)

const filteredPoems = computed(() => {
  let poems = poetryStore.poetryCollection?.poems || []
  
  // 按搜索词过滤
  if (searchQuery.value.trim()) {
    poems = poetryStore.searchPoems(searchQuery.value)
  }
  
  // 按主题过滤
  if (selectedTheme.value) {
    const themePoems = poetryStore.getPoemsByTheme(selectedTheme.value)
    poems = poems.filter(poem => 
      themePoems.some(tp => tp.id === poem.id)
    )
  }
  
  // 按朝代过滤
  if (selectedDynasty.value) {
    poems = poems.filter(poem => poem.dynasty === selectedDynasty.value)
  }
  
  // 按难度过滤
  if (selectedDifficulty.value) {
    const difficultyPoems = poetryStore.getPoemsByDifficulty(selectedDifficulty.value)
    poems = poems.filter(poem => 
      difficultyPoems.some(dp => dp.id === poem.id)
    )
  }
  
  // 按作者过滤
  if (selectedAuthor.value) {
    poems = poems.filter(poem => poem.author === selectedAuthor.value)
  }
  
  return poems
})

// 清除所有筛选
const clearFilters = () => {
  searchQuery.value = ''
  selectedTheme.value = ''
  selectedDynasty.value = ''
  selectedDifficulty.value = ''
  selectedAuthor.value = ''
}

// 获取主题名称
const getThemeName = (key: string): string => {
  const theme = themes.value.find(t => t.key === key)
  return theme?.name || key
}

// 获取难度名称
const getDifficultyName = (key: string): string => {
  const difficulty = difficulties.value.find(d => d.key === key)
  return difficulty?.name || key
}

// 统计方法
const getPoemCountByDynasty = (dynasty: string): number => {
  return poetryStore.getPoemsByDynasty(dynasty).length
}

const getPoemCountByDifficulty = (difficulty: string): number => {
  return poetryStore.getPoemsByDifficulty(difficulty).length
}

const getPoemCountByAuthor = (author: string): number => {
  return poetryStore.getPoemsByAuthor(author).length
}

// 初始化
onMounted(async () => {
  if (!poetryStore.poetryCollection) {
    await poetryStore.loadPoetryData()
  }
  
  // 计算各主题的数量
  themes.value.forEach(theme => {
    theme.count = poetryStore.getPoemsByTheme(theme.key).length
  })
})
</script>

<style scoped>
.category-view {
  background: linear-gradient(135deg, #FFFBF0 0%, #FFF4E6 100%);
}

/* 自定义滚动条 */
.max-h-48::-webkit-scrollbar {
  width: 6px;
}

.max-h-48::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.max-h-48::-webkit-scrollbar-thumb {
  background: #FF6B6B;
  border-radius: 3px;
}

.max-h-48::-webkit-scrollbar-thumb:hover {
  background: #FF8E53;
}
</style>